var HTTP = require('../../utils/http.js')
var handleLogin = require('../../utils/handleLogin.js')
import {
  config
} from '../../config.js'
Page({
  data: {
    carList: [],
    fileUrl: '',
    currentCarIndex: 0
  },
  onLoad: function() {
    this.setData({
      fileUrl: config.api_file_url
    })
    var _this = this;
    _this.getCarList();
    wx.getSystemInfo({
      success: function(res) {
        _this.setData({
          windowHeight: res.windowHeight,
          windowWidth: res.windowWidth
        })
      }
    });
  },
  imgCenter: function() {
    var _x = 0,
      _y = 0;
    var query = wx.createSelectorQuery(),
      that = this;
    query.select('.car-list-item').boundingClientRect(function(rect) {
      _y = (that.data.windowHeight - rect.height) / 2;
      _x = (that.data.windowWidth - rect.width) / 2;
      that.setData({
        imgLeft: _x,
        imgTop: _y
      })
    }).exec();
  },
  imgTouchStart: function(e) {
    if (e.touches.length == 1) {
      this.setData({
        startX: e.touches[0].clientX,
        startY: e.touches[0].clientY,
        lastX: e.touches[0].clientX,
        lastY: e.touches[0].clientY
      });
    }
  },
  imgTouchMove: function(e) {
    var disX = e.changedTouches[0].clientX - this.data.lastX;
    var disY = e.changedTouches[0].clientY - this.data.lastY;

    this.setData({
      lastX: e.touches[0].clientX,
      lastY: e.touches[0].clientY,
    });

    var _carList = this.data.carList;
    var currentCar = _carList[this.data.currentCarIndex];

    var _translateX = currentCar.translateX + disX;
    var _translateY = currentCar.translateY + disY;
    this.imgActive(this.data.currentCarIndex, 3, 1, 0, _translateY, 0, _translateX);
  },
  initArr: function(curIndex) {
    var _carList = this.data.carList,
      len = _carList.length,
      arr = [],
      idx = curIndex;
    arr.push(idx);
    while (arr.length < len) {
      if (idx++ < len - 1) {
        arr.push(idx);
      } else {
        idx = 0;
        arr.push(idx);
      }
    };
    return arr
  },
  updateImg: function(curIndex) {
    var arr = this.initArr(curIndex),
      len = this.data.carList.length;
    var nZidx = 3,
      nTz = 0,
      _opacity = 1,
      _duration = 1000,
      _translateY = 0,
      _scale = 1;
      // debugger;
    for (var i = 0; i < len; i++) {
      if(i ==0){
        this.imgActive(arr[i], nZidx - i, _opacity - 0.2 * i, _duration, _translateY + i * 10, _scale - 0.1 * i, 0);
      }else if (i < 4) {
        this.imgActive(arr[i], nZidx - i-1, _opacity - 0.2 * (i-1), _duration, _translateY + (i-1) * 10, _scale - 0.1 * (i-1), 0);
      } else {
        this.imgActive(arr[i], 0, 0, _duration, 0, 0, 0);
      }
    }
  },
  imgActive: function(i, zIndex, opacity, duration, translateY, scale, translateX) { //
    var _carList = this.data.carList,
      newlist = _carList[i];
    newlist.zIndex = zIndex;
    newlist.translateY = translateY;
    newlist.translateX = translateX;
    newlist.opacity = opacity;
    newlist.scale = scale;
    newlist.transitionDuration = duration;
    _carList[i] = newlist;
    this.setData({
      carList: _carList
    });
  },
  nextImg: function() {
    var suffixCarIndex = this.data.currentCarIndex;
    suffixCarIndex = this.data.currentCarIndex + 1;
    suffixCarIndex = suffixCarIndex >= this.data.carList.length ? 0 : suffixCarIndex;
    this.updateImg(suffixCarIndex);
    this.setData({
      currentCarIndex: suffixCarIndex,
    });
  },
  imgTouchEnd: function(e) {
    var _carList = this.data.carList;
    var currentCar = _carList[this.data.currentCarIndex];
    console.info(currentCar.translateX, currentCar.translateY);
    if (Math.abs(currentCar.translateX) < this.data.windowWidth/2 && Math.abs(currentCar.translateY) < this.data.windowHeight/5) {
      this.updateImg(this.data.currentCarIndex);
    } else { // 切换下一张
      this.nextImg();
    };
  },
  getCarList: function(page, callBack) {
    var _this = this;
    page = page || 1;
    const h = HTTP.request({
      url: '/miniapp/showCar/queryForMiniApp',
      data: {
        curPage: page,
        isPaging: 0
      },
      method: 'GET',
      header: {
        'content-type': 'application/x-www-form-urlencoded',
        'Accept': 'application/json'
      },
    })
    h.then((res) => {
      var _carList = res.data;

      if (_carList.length == 0) {
        return;
      }
      this.setData({
        carList: _this.data.carList.concat(_carList)
      })
      this.updateImg(0);
      this.imgCenter();
    }, (error) => {
      // wx.showToast({
      //   title: '网络错误',
      //   duration: 2000
      // })
    })
  },

  goMe: function() {
    //跳转我的页面
    handleLogin.isLogin(this.jumpToMe)
  },
  jumpToMe: function() {
    wx.navigateTo({
      url: '../my/my'
    });
  },
  onJumpToCarDetail: function(event) {
    if (!getApp().globalData.userInfo) {
      wx.navigateTo({
        url: '/pages/login/login',
      })
    } else {
      wx.navigateTo({
        url: '/pages/carDetail/carDetail?bid=' + event.currentTarget.id,
      })
    }
  },

})